<template>
  <div>
    <div class="plugins-tips">项目管理:文件上传</div>
    <div>
      <el-upload v-model:file-list="fileList" class="upload-demo" drag
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-preview="handlePreview"
        :on-remove="handleRemove" :before-remove="beforeRemove" :limit="10" :on-exceed="handleExceed" multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖拽到这里 或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">仅限jpg/png格式文件，大小不超过500kb</div>
        </template>
        <!-- 自定义文件列表 -->
        <template #file="{ file }">
          <div class="el-upload-list__item is-success">
            <img class="el-icon--file" :src="getFileIcon(file)" alt="File Icon" />
            <a class="el-upload-list__item-name" @click="handlePreview(file)">
              {{ file.name }}
            </a>
            <label class="el-upload-list__item-status-label">
              <i class="el-icon-upload-success el-icon--check"></i>
            </label>
            <el-icon class="el-icon-close" @click="() => handleRemove(file)" title="移除">
              <Close />
            </el-icon>
            <i class="el-icon-close-tip">按 delete 移除</i>
          </div>
        </template>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const fileList = ref([
  {
    name: '文件名称.docx',  //文件名称
    url: '文件上传地址',   //文件上传地址
  },
  {
    name: '文档名称.pptx',
    url: '文件上传地址',
  },
  {
    name: '文档名称.pdf',
    url: '文件上传地址',
  },
  {
    name: '文档名称.xls',
    url: '文件上传地址',
  },
  {
    name: '文档名称.7z',
    url: '文件上传地址',
  },
  {
    name: '文档名称.rar',
    url: '文件上传地址',
  },
  {
    name: '文档名称.zip',
    url: '文件上传地址',
  },
  {
    name: '未知文件',
    url: '文件上传地址',
  },
])

const handleRemove = (file, uploadFiles) => {
  console.log('handleRemove', file, uploadFiles);
  // 使用数组的 filter 方法来移除匹配的文件
  fileList.value = fileList.value.filter(item => item.name !== file.name);
}

const handlePreview = (file) => {
  console.log('handlePreview', file)
}

// 根据文件类型返回对应的图标路径
function getFileIcon(file) {
  const extension = file.name.split('.').pop();
  const iconMap = {
    docx: require('@/assets/svg/ic_files_doc.svg'),
    pdf: require('@/assets/svg/ic_files_pdf.svg'),
    xls: require('@/assets/svg/ic_files_xls_normal.svg'),
    pptx: require('@/assets/svg/ic_files_pptx.svg'),
    rar: require('@/assets/svg/ic_files_rar.svg'),
    zip: require('@/assets/svg/ic_files_zip.svg'),
    '7z': require('@/assets/svg/ic_files_7z.svg')
    // ... 其他文件类型映射
  };

  // 如果文件类型没有对应的图标，可以返回一个默认图标
  return iconMap[extension] || require('@/assets/svg/ic_files_documents.svg');
}


const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(`一次限制传输5个文件, 你选择了 ${files.length} 个文件，总共${files.length + uploadFiles.length} 个文件`)
}

const beforeRemove = (file, uploadFiles) => {
  return ElMessageBox.confirm(`确定移除已上传的文件 ${file.name} 吗?`).then(
    () => true,
    () => false
  )
}

const handleSuccess = (response, file, uploadFiles) => {
  console.log('handleSuccess', response, file, uploadFiles)
  ElMessage.success(`文件 ${file.name} 上传成功`)
}

const handleError = (error, file, uploadFiles) => {
  console.log('handleError', error, file, uploadFiles)
  ElMessage.error(`文件 ${file.name} 上传失败`)
}
</script>

<style lang="scss" scoped>
.plugins-tips {
  background: rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.el-upload-list__item {
  .el-icon--file {
    margin-right: 8px;
    width: 24px;
    /* 根据需要调整图标大小 */
    height: 24px;
    /* 根据需要调整图标大小 */
  }

  .el-icon-close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }

  .el-icon-close-tip {
    display: none;
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 12px;
    background: #fff;
    color: #f56c6c;
    cursor: pointer;
  }
}
</style>